<template>
    <div>
        <ux-grid ref="singleTable" v-if="reLoadFlg" :data="prposTabelData" style="width: 100%" border
            :header-cell-style="{
                color: 'rgba(0, 0, 0, 0.85)',
                fontSize: '14px',
                textAlign: 'left',
                fontWeight: 'bold',
                padding: 0,
                height: '32px',
            }" :cell-style="{
            color: 'rgba(96,98,102,1)',
            fontSize: '14px',
            textAlign: 'left',
            padding: 0,
            height: '32px',
        }" :row-style="{
            color: 'rgba(96,98,102,1)',
            fontSize: '13px',
            textAlign: 'left',
            padding: 0,
            height: '32px',
        }" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight" v-loading="loading"
            element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
            :element-loading-text="$t('message.bhView.loading')">
            <template slot="empty"> {{ empty }} </template>
            <ux-table-column property="ssn_date" :title="tabelDataConfig.ssn_Date.title"
                v-if="tabelDataConfig.ssn_Date.isShow" :width="tabelDataConfig.ssn_Date.width" :fixed="JSON.parse(tabelDataConfig.ssn_Date.isFlex) ? 'left' : ''
                    " :resizable="false">
                <template slot-scope="scope">
                    <!-- <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.ssn_date"
            placement="top-start"
          > -->
                    <p :class="scope.row.actu_kbn == 1 ? 'sizeColor' : ''">
                        {{ scope.row.ssn_date }}
                    </p>
                    <!-- </el-tooltip> -->
                </template>
            </ux-table-column>
            <ux-table-column property="wrk_cls_name" :title="tabelDataConfig.wrk_Cls_Name.title"
                v-if="tabelDataConfig.wrk_Cls_Name.isShow" :width="tabelDataConfig.wrk_Cls_Name.width" :fixed="JSON.parse(tabelDataConfig.wrk_Cls_Name.isFlex)
                    ? 'left'
                    : ''
                    " :resizable="false">
                <template slot-scope="scope">
                    <p :class="scope.row.actu_kbn == 1 ? 'sizeColor' : ''" :title="scope.row.wrk_cls_name">
                        {{ scope.row.wrk_cls_name }}
                    </p>
                </template>
            </ux-table-column>
            <ux-table-column property="summary" :title="tabelDataConfig.summary.title"
                v-if="tabelDataConfig.summary.isShow" :width="tabelDataConfig.summary.width" :fixed="JSON.parse(tabelDataConfig.summary.isFlex) ? 'left' : ''
                    " :resizable="false">
                <template slot-scope="scope">
                    <!-- <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.summary"
            placement="top-start"
          > -->
                    <p :class="scope.row.actu_kbn == 1 ? 'sizeColor' : ''" :title="scope.row.summary">
                        {{ scope.row.summary }}
                    </p>
                    <!-- </el-tooltip> -->
                </template>
            </ux-table-column>
            <ux-table-column property="cnt_pln" :title="tabelDataConfig.cnt_Pln.title"
                v-if="tabelDataConfig.cnt_Pln.isShow" :width="tabelDataConfig.cnt_Pln.width" :fixed="JSON.parse(tabelDataConfig.cnt_Pln.isFlex) ? 'left' : ''
                    " :resizable="false">
                <template slot-scope="scope">
                    <p :class="scope.row.actu_kbn == 1 ? 'sizeColor' : ''" :title="scope.row.cnt_pln">
                        {{ scope.row.cnt_pln }}
                    </p>
                </template>
            </ux-table-column>
            <ux-table-column property="kbn" :title="tabelDataConfig.kbn.title" v-if="tabelDataConfig.kbn.isShow"
                :width="tabelDataConfig.kbn.width" :fixed="JSON.parse(tabelDataConfig.kbn.isFlex) ? 'left' : ''"
                :resizable="false">
                <template slot-scope="scope">
                    <p :class="scope.row.actu_kbn == 1 ? 'sizeColor' : ''" :title="scope.row.kbn">
                        {{ scope.row.kbn }}
                    </p>
                </template>
            </ux-table-column>
            <ux-table-column property="con_cts1" :title="tabelDataConfig.con_Cts1.title"
                v-if="tabelDataConfig.con_Cts1.isShow" :width="tabelDataConfig.con_Cts1.width" :fixed="JSON.parse(tabelDataConfig.con_Cts1.isFlex) ? 'left' : ''
                    " :resizable="false">
                <template slot-scope="scope">
                    <p :class="scope.row.actu_kbn == 1 ? 'sizeColor' : ''" :title="scope.row.con_cts1">
                        {{ scope.row.con_cts1 }}
                    </p>
                </template>
            </ux-table-column>
            <ux-table-column property="con_cts2" :title="tabelDataConfig.con_Cts2.title"
                v-if="tabelDataConfig.con_Cts2.isShow" :width="tabelDataConfig.con_Cts2.width" :fixed="JSON.parse(tabelDataConfig.con_Cts2.isFlex) ? 'left' : ''
                    " :resizable="false">
                <template slot-scope="scope">
                    <p :class="scope.row.actu_kbn == 1 ? 'sizeColor' : ''" :title="scope.row.con_cts2">
                        {{ scope.row.con_cts2 }}
                    </p>
                </template>
            </ux-table-column>
            <ux-table-column property="isp_cts1" :title="tabelDataConfig.isp_Cts1.title"
                v-if="tabelDataConfig.isp_Cts1.isShow" :width="tabelDataConfig.isp_Cts1.width" :fixed="JSON.parse(tabelDataConfig.isp_Cts1.isFlex) ? 'left' : ''
                    " :resizable="false">
                <template slot-scope="scope">
                    <p :class="scope.row.actu_kbn == 1 ? 'sizeColor' : ''" :title="scope.row.isp_cts1">
                        {{ scope.row.isp_cts1 }}
                    </p>
                </template>
            </ux-table-column>
            <ux-table-column property="isp_rst_name" :title="tabelDataConfig.isp_Rst_Name.title"
                v-if="tabelDataConfig.isp_Rst_Name.isShow" :width="tabelDataConfig.isp_Rst_Name.width" :fixed="JSON.parse(tabelDataConfig.isp_Rst_Name.isFlex)
                    ? 'left'
                    : ''
                    " :resizable="false">
                <template slot-scope="scope">
                    <p :style="{ color: scope.row.isp_rst_abrv }" :title="scope.row.isp_rst_name">
                        {{ scope.row.isp_rst_name }}
                    </p>
                </template>
            </ux-table-column>
        </ux-grid>
    </div>
</template>

<script>
// import $ from 'jquery'
import eventBus from "@/eventBus/bus";
import { showLoading, hideLoading } from "@/utils/loading";
// 导出模块
export default {
    // 模块名字
    name: "MSTabel",
    props: {
        tableHeight: Number,
        prposTabelData: Array,
        loading: Boolean,
        tabelDataConfig: Object,
        empty: String,
        rightViewFlag: Boolean
    },
    // 模块数据
    data() {
        //数据
        return {
            currentRow: {},
            DateList: [],
            activeNum: 0,   //当前激活行,
            nextIndex: -1,

            reLoadFlg: true,

        };
    },
    // 注册组件
    components: {},
    // 监听指定值，只有指定值变化，才会触发
    watch: {
        /**情况
         * 1.内侧列表为空
         * 2.列表有值
         * 3.列表点击行
         * 4.列表移动复位
         */
        prposTabelData: {
            immediate: true,
            handler(nData) {
                showLoading();
                this.reLoadFlg = false;
                console.log(nData)

                this.DateList = [];
                if (nData.length != 0) {
                    // if(this.nextIndex == -1){
                    //     return
                    // }
                    // let nextIndex = this.nextIndex == -1? this.activeNum: this.nextIndex;
                    // this.$refs.singleTable.setCurrentRow(this.prposTabelData[nextIndex]);
                    //         // this.currentRow = this.prposTabelData[this.activeNum];
                    // this.$emit("getMSTabelRow", this.prposTabelData[nextIndex]);
                    // if(nextIndex >= 9){
                    //     this.$refs.singleTable.pagingScrollTopLeft((nextIndex-2)*33);
                    // }
                    // setTimeout(() => {
                    //     this.nextIndex = -1;
                    // }, 50);
                    // 2.列表有值--初始化数据-选择第一项-通知选择第一项
                    // this.DateList = nData[0].dataJson;
                    // this.activeNum = 0;

                    // this.$refs.singleTable.setCurrentRow(this.prposTabelData[0]);
                    // this.currentRow = this.prposTabelData[0];

                    // this.$emit("getMSTabelRow", this.prposTabelData[0]);
                    // this.$nextTick(() => {
                    //     let _this = this;
                    //     _this.$refs.singleTable.doLayout(true);
                    //     _this.$refs.singleTable.pagingScrollTopLeft(0, 0);
                    //     setTimeout(function () {
                    //         _this.setCurrentByR(0);
                    //     }, 100);
                    // });

                    // **
                    eventBus.$emit("MSCType", 2)
                } else {
                    this.$emit("getMSTabelRow", 'listEmpty');
                    //1.内侧列表为空
                    // setTimeout(() => {
                    //     // eventBus.$emit("resetSaveForMSC")
                    //     console.log("111111111111111111")
                    // }, 300);
                }
                setTimeout(() => {
                    hideLoading();
                    this.reLoadFlg = true;

                    this.$refs.singleTable.refreshColumn();
                    this.$refs.singleTable.doLayout();
                }, 100)
            },
        },

    },
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        setCurrentByR(index) {
            this.$refs.singleTable.pagingScrollTopLeft(index * 32);
            this.$refs.singleTable.setCurrentRow(this.prposTabelData[index]);
            this.handleCurrentChange(this.prposTabelData[index]);
            //       for (var i = 0; i < this.prposTabelData.length; i++) {
            //         // debugger
            //         if (this.prposTabelData[i].POS_ORDR == r) {
            //           this.$refs.singleTable.pagingScrollTopLeft(i * 32);
            //           this.$refs.singleTable.setCurrentRow(this.prposTabelData[i]);
            //           return;
            //         }
            //       }
        },
        //3.列表点击行--通知当前选择行-记录当前index值
        handleCurrentChange(val) {
            if (this.rightViewFlag) {
                eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
            }

            let Fn = () => {
                this.$store.state.threeFlg = val.ssn_date;
                //阻止点击后切换
                this.currentRow = val;
                if (this.$store.state.isStop.flg) {
                    this.prposTabelData.forEach((i, v) => {
                        if (i == val) {
                            this.nextIndex = v;
                        }
                    });
                    this.$store.state.isStop.name = 'active';
                    this.$store.state.isStop.next = 'goNextOfCenterTable';
                    this.$refs.singleTable.setCurrentRow(this.prposTabelData[this.activeNum]);
                    return
                }
                this.$emit("getMSTabelRow", val);
                this.prposTabelData.forEach((i, v) => {
                    if (i == val) {
                        this.activeNum = v;
                    }
                });

                eventBus.$emit("MSCType", 2)
                this.$refs.singleTable.setCurrentRow(this.currentRow);
            }

            if (this.$store.state.isCurrentNext) {
                Fn();
            } else {
                /**
                  * 4-1。   记录原来该运行的函数。
                  * 4-2。   执行保存弹出框操作。   
                  */
                this.$refs.singleTable.setCurrentRow(this.currentRow);
                this.$store.commit("changeIsCurrentFn", Fn);

                eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
            }

        },
        load() {
            let res = this.$refs.singleTable.bodyWrapper;
            let scrollLeft = res.scrollLeft;
            if (scrollLeft > 0) return;
            this.$emit("ListenScrollGetData", "到底了");
        },
    },
    // 创建前状态(里面是操作)
    beforeCreate() { },
    // 创建完毕状态(里面是操作)
    created() { },
    // 挂载前状态(里面是操作)
    beforeMount() { },
    // 挂载结束状态(里面是操作)
    mounted() {
        // 设置选择第几行
        /**
         * 1.默认第一行，表格刷新第一行
         * 2.新增修改，传唯一值（POS_NO），设置当前行
         * 3.数据修改切换数据，提示是否保存。----实现思路，记录点击后的POS_NO，并不切换，等，需要切换时刷新即可
         */
        eventBus.$on("SET_B", (isInit) => {
            var Num = 0;
            if (isInit) {
                Num = this.$store.state.threeFlg;
            } else {
                Num = 0;
            }
            let V = 0;
            this.prposTabelData.forEach((i, v) => {
                if (i.ssn_date == Num) {
                    V = v;
                }
            });

            this.$refs.singleTable.setCurrentRow(this.prposTabelData[V]);
            this.currentRow = this.prposTabelData[V];
            eventBus.$emit("MSCType", 2);
            this.$emit("getMSTabelRow", this.prposTabelData[V]);
            this.currentRow = this.prposTabelData[V];
            if (V >= 9) {
                this.$refs.singleTable.pagingScrollTopLeft((V - 2) * 33);
            } else {
                this.$refs.singleTable.pagingScrollTopLeft(0);
            }
        })

        eventBus.$on("goNextOfCenterTable", () => {
            if (this.nextIndex == -1) {
                return
            }
            this.$refs.singleTable.setCurrentRow(this.prposTabelData[this.nextIndex]);
            // this.currentRow = this.prposTabelData[this.activeNum];
            this.$emit("getMSTabelRow", this.prposTabelData[this.nextIndex]);
            if (this.nextIndex >= 9) {
                this.$refs.singleTable.pagingScrollTopLeft((this.nextIndex - 2) * 33);
            }
            setTimeout(() => {
                this.nextIndex = -1;
            }, 50);
        });

        eventBus.$on("resetTabelStyleForMSC", (setNum) => {
            if (setNum) {
                console.log(this.activeNum)
                setTimeout(() => {
                    this.$refs.singleTable.setCurrentRow(this.prposTabelData[this.activeNum]);
                    // this.currentRow = this.prposTabelData[this.activeNum];
                    this.$emit("getMSTabelRow", this.prposTabelData[this.activeNum]);
                    if (this.activeNum >= 9) {
                        this.$refs.singleTable.pagingScrollTopLeft((this.activeNum - 2) * 33);
                    }
                }, 500);
            } else {
                this.$refs.singleTable.setCurrentRow(this.prposTabelData[0]);
                // this.currentRow = this.prposTabelData[0];
                this.$emit("getMSTabelRow", this.prposTabelData[0]);
            }

            setTimeout(() => {
                this.$refs.singleTable.doLayout(true);
            }, 300);
        });
        eventBus.$on("handTabelStyleForMS", () => {
            this.handleCurrentChange(this.currentRow)
        });
        // this.$nextTick(function(){
        //   $('.elx-table--empty-content').html('No data')
        // })
    },
    // 更新前状态(里面是操作)
    beforeUpdate() { },
    // 更新完成状态(里面是操作)
    updated() { },
    // 销毁前状态(里面是操作)
    beforeDestroy() {
        eventBus.$off('SET_B');
        eventBus.$off('goNextOfCenterTable');
        eventBus.$off('resetTabelStyleForMSC');
        eventBus.$off('handTabelStyleForMS');
    },
    // 销毁完成状态(里面是操作)
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-text {
    width: 100%;
    height: 100%;
    // text-align: right;
}

.dateMessage {
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
    line-height: 32px;
}

.sizeColor {
    color: rgb(22, 22, 255);
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//     background: rgb(233, 236, 237);
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
    border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
    box-shadow: none;
}

// ::v-deep .elx-table .elx-body--column.col--ellipsis > .elx-cell,
// ::v-deep .elx-table .elx-footer--column.col--ellipsis > .elx-cell,
// ::v-deep .elx-table .elx-header--column.col--ellipsis > .elx-cell {
//   max-height: 100%;
// }
// ::v-deep .elx-checkbox .elx-checkbox--label,
// ::v-deep .elx-radio .elx-radio--label,
// ::v-deep .elx-radio-button .elx-radio--label,
// ::v-deep .elx-table .elx-body--column.col--ellipsis:not(.col--actived) > .elx-cell,
// ::v-deep .elx-table .elx-footer--column.col--ellipsis:not(.col--actived) > .elx-cell,
// ::v-deep .elx-table .elx-header--column.col--ellipsis:not(.col--actived) > .elx-cell {
//   overflow: visible;
//   text-overflow: clip;
//   white-space: pre-wrap;
// }</style>
